<template>
  <div class="container">
    <div class="app-container">
      <!-- 卡片视图 -->
      <el-card shadow="never">
        <!-- 关键字搜索 -->
        <el-form :inline="true" :model="requestForm" class="demo-form-inline">
          <el-row class="searchList">
            <el-col>
              <el-form-item label="关键字">
                <el-input v-model="requestForm.keyword" placeholder="根据编号搜索"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button @click="clear" size="small">清除</el-button>
              <el-button type="primary" @click="onSubmit" size="small">搜索</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-alert :title="alertText" type="info" show-icon class="alert" :closable="false"></el-alert>
        <!-- /关键字搜索 -->

        <!-- 数据 -->
        <el-table :data="dataList" v-loading="listLoading" element-loading-text="正在加载，请稍等..." fit style="width: 100%">
          <el-table-column align="center" label="编号" prop="id" width="200"></el-table-column>
          <el-table-column align="center" label="题型" prop="questionType">
            <template slot-scope="scope">
              <span v-if="scope.row.questionType === '1'">单选</span>
              <span v-else-if="scope.row.questionType === '2'">多选</span>
              <span v-else>简答</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="题目编号" width="200">
            <template slot-scope="scope">
              <el-link :underline="false" type="primary" v-for="(item, index) in scope.row.questionIDs" :key="index" @click="questionDialog(item.id)">{{ item.number }}</el-link>
            </template>
          </el-table-column>
          <el-table-column align="center" label="录入时间" prop="addTime" width="200"></el-table-column>
          <el-table-column align="center" label="答题时间(s)" prop="totalSeconds"></el-table-column>
          <el-table-column align="center" label="正确率(%)" prop="accuracyRate"></el-table-column>
          <el-table-column align="center" label="录入人" prop="userName"></el-table-column>

          <!-- 按钮 -->
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="removeUser(scope.row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- /数据 -->

        <!-- 分页 -->
        <el-pagination
          class="pagetool"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Number(requestParameters.page)"
          :total="Number(total)"
          :page-size="Number(requestParameters.pagesize)"
          :page-sizes="[10, 20, 30, 50, 100]"
          layout="prev, pager, next, sizes, jumper"
        ></el-pagination>
        <!-- /分页 -->
      </el-card>
      <!-- /卡片视图 -->

      <!-- 题目预览弹框 -->
      <el-dialog title="题目预览" :visible.sync="dialogVisible" @close="videoPreview = false">
        <el-row class="yulan" :gutter="24">
          <el-col :span="6" v-if="preview.questionType === '1'">【题型】：单选</el-col>
          <el-col :span="6" v-else-if="preview.questionType === '2'">【题型】：多选</el-col>
          <el-col :span="6" v-else>【题型】：简答</el-col>
          <el-col :span="6">【编号】：{{ preview.id }}</el-col>
          <el-col :span="6">【难度】：{{ preview.difficulty === '1' ? '简单' : preview.difficulty === '2' ? '一般' : '困难' }}</el-col>
          <el-col :span="6">【标签】：{{ preview.tags }}</el-col>
        </el-row>
        <el-row class="yulan" :gutter="24">
          <el-col :span="6">【学科】：{{ preview.subjectID }}</el-col>
          <el-col :span="6">【目录】：{{ preview.catalogID }}</el-col>
          <el-col :span="6">【方向】：{{ preview.direction }}</el-col>
        </el-row>
        <hr />
        <el-row>【题干】：{{ preview.question | html2Text }}</el-row>
        <el-row>【选项】：（以下选中的选项为正确答案）</el-row>
        <el-row>
          <el-row v-for="(item, index) in preview.options" :key="index">
            <el-col>
              <el-radio v-if="preview.questionType === '1'" :label="1" :value="item.isRight">{{ item.code + '.' + item.title }}</el-radio>
              <el-checkbox v-else-if="preview.questionType === '2'" :value="item.isRight ? true : false">{{ item.code + '.' + item.title }}</el-checkbox>
            </el-col>
          </el-row>
        </el-row>
        <hr />
        <div>
          <span>【参考答案】：</span>
          <el-button type="danger" size="small" @click="videoPreview = true">视频答案预览</el-button>
          <div>
            <video v-if="videoPreview" muted autoplay loop class="videoPreview" :src="preview.videoURL"></video>
          </div>
        </div>
        <hr />
        <div>【答案解析】：{{ preview.answer | html2Text }}</div>
        <hr />
        <div>【题目备注】：{{ preview.remarks }}</div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
        </span>
      </el-dialog>
      <!-- /题目预览弹框 -->
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'

// import { html2Text } from '@/api/utils/index.js'
// import { list, detail } from '@/api/hmmm/questions'

export default {
  name: 'randoms',
  components: {},
  props: {},
  data() {
    return {
      radiocheck: '', // 单选value
      doublecheck: [], // 复选value
      videoPreview: false,
      dataList: [], // 数据来源
      listLoading: true,
      alertText: '',
      total: null,
      requestParameters: {
        page: 1,
        pagesize: 20
        // username: this.username
      },
      dialogVisible: false,
      itemInfo: {},
      requestForm: {
        keyword: ''
      },
      // 题目预览弹框数据绑定
      preview: {}
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getList()
  },
  mounted() {},
  methods: {
    // 获取数据列表
    async getList(params) {
      try {
        this.listLoading = true
        const { data } = await randoms(params)
        this.dataList = data.items
        console.log(data)
        this.total = data.counts
        this.alertText = `共 ${this.total} 条记录`
        this.listLoading = false
      } catch (err) {
        console.log('失败')
      }
    },

    // 点击清除按钮
    clear() {
      this.requestForm.keyword = ''
      this.getList()
    },

    // 点击搜索按钮
    onSubmit() {
      // this.requestParameters.keyword =
      this.getList(this.requestForm)
    },

    // 进入某一页
    handleCurrentChange(newpage) {
      this.requestParameters.page = newpage
      this.getList(this.requestParameters)
    },

    // 每页显示信息条数
    handleSizeChange(newsize) {
      this.requestParameters.pagesize = newsize
      if (this.requestParameters.page === 1) {
        this.getList(this.requestParameters)
      }
    },
    // 删除列表行
    removeUser(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await removeRandoms({ id })
            .then((aaa) => {
              this.$message.success('成功删除了用户!')
              this.dataList.splice(id, 1)
              this.getList(this.requestParameters)
            })
            .catch((aaa) => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    async questionDialog(id) {
      this.dialogVisible = true

      try {
        const { data } = await detail({ id: id })
        this.preview = data
        console.log(data.options)
        // if (data.questionType === '1') {
        //   console.log(1)
        //   data.options.some((item, index) => {
        //     if (item.isRight === 1) {
        //       console.log(index)
        //       this.radiocheck = index
        //       return true
        //     }
        //   })
        // } else {
        //   data.options.forEach((item, index) => {
        //     if (item.isRight === 1) {
        //       this.doublecheck.push(index)
        //     }
        //   })
        // }
      } catch (err) {
        console.log('失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
.videoPreview {
  margin-top: 10px;
  width: 500px;
  //   height: 50px;
}
.pagetool {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.el-table {
  margin-top: 10px;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
.yulan {
  margin-bottom: 20px;
}
.searchList {
  display: flex;
  justify-content: space-between;
}
</style>
